<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <title>四叶草轻小说-登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-title" content="哔哩轻小说">
    <link rel="stylesheet" href="../assets/css/sprite.css">
    <script src="../assets/js/jquery-3.3.1.js"></script>
    <script src="../assets/js/index.js" async></script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .login-form {
            max-width: 400px;
            margin: auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .login-form input[type="text"],
        .login-form input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
        }
        .login-form input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .login-form input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .error {
            color: red;
            text-align: center;
        }
    </style>
    <%--        // 导航条样式--%>
    <style>
        .header .btn-group {
            width: 32%;
        }

        .header .btn-tab {
            line-height: 1.375rem;
        }

        .sp-dark-mode .header {
            border-bottom: 1px solid #1c1c1c;
        }

        @media (prefers-color-scheme: dark) {
            .header {
                border-bottom: 1px solid #1c1c1c;
            }
        }
    </style>
    <style>
        @media screen and (min-width: 768px) {
            ol.book-ol li {
                width: calc(50% - 6px);
                display: inline-block;
            }

            .book-meta-l {
                width: 80%
            }

            .book-meta-r .red, .book-meta-r .blue {
                display: none
            }

            .trigger-book-comment .book-li:nth-child(3)::after, .book-ol .book-li:nth-child(5)::after {
                border-bottom: none;
            }

            .module-slide-ol {
                white-space: normal;
                padding-bottom: .75rem;
            }

            .module-slide-li {
                width: calc(19% - 5px);
            }

            .module-slide-a {
                width: 5.125rem;
                padding: 0.75rem 1.45rem 0.5rem;
            }

            .module-slide-img {
                height: 7.25rem;
            }

            .book-comment-p {
                min-height: 2.5625rem;
            }
        }

        @media screen and (max-width: 600px) {
            ol.book-ol li {
                width:100%;
                display: block
            }
        }
    </style>
</head>
<body class="night">
<div class="page page-home">
    <div class="content">
        <header id="header" class="header header-index">
            <a href="index.jsp" class="logo-a">
                <h1 class="logo">哔哩轻小说</h1>
            </a>
            <nav class="btn-group">
                <a href="<c:url value="../index.jsp"/>" class="btn-tab active">轻小说</a>
                <a href="<c:url value="/info/info.jsp"/>" class="btn-tab">个人主页</a>
            </nav>
            <div class="header-operate red">
                <a href="<c:url value="/novel/login.jsp"/>" class="icon icon-regs">登录</a>
                <a href="<c:url value="/novel/reg.jsp"/>" class="icon icon-regs">注册</a>
            </div>
        </header>
        <!-- 页面内容 S -->
            <div class="login-form">
                <h2>登录</h2>
                <form action="${pageContext.request.contextPath}//UserLoginServlet" method="post">
                    <input type="text" name="username" placeholder="用户名" required>
                    <input type="password" name="password" placeholder="密码" required>
                    <input type="submit" value="登录">
                </form>
                <%
                    String error = request.getParameter("error");
                    if (error != null) {
                %>
                <div class="error"><%= error %></div>
                <%
                    }
                %>
            </div>
        </div>
    </div>
</body>
<style>
    #recentlyRead .book-cell {
        margin-left: auto
    }

    @font-face {
        font-family: read;
        font-display: block;
        src: url('/public/font/read.woff2') format('woff2'), url('/public/font/read.ttf') format('truetype');
    }

    #J_themesSwitchBtn {
        font-family: "read" !important;
    }
</style>

</html>